<template>
	<view class="flex grid-gap-4 flex-center my-4">
		<view class="border-top flex-1" :class="[props.dashed?'border-top-dashed':'']"></view>
		<view class="text-placeholder h10" @tap="more">{{text}}</view>
		<view class="border-top flex-1" :class="[props.dashed?'border-top-dashed':'']"></view>
	</view>
</template>

<script setup lang="ts">
import { ref, defineProps, watchEffect } from "vue";
const props = withDefaults(defineProps<{
	status?: LoadingType
	loadmore?:string
	loading?:string
	nomore?:string
	dashed?:boolean
}>(), {
	status: 'loadmore',
	loadmore: '加载更多',
	loading: '加载中...',
	nomore: '没有更多了',
	dashed: false
});
const emit = defineEmits(['load']);
const text=ref(props.loadmore);
watchEffect(()=>{
	switch(props.status){
		case 'loadmore':
			text.value=props.loadmore;
			break;
		case 'loading':
			text.value=props.loading;
			break;
		case 'nomore':
			text.value=props.nomore;
			break;
	}
})
const more=()=>{
	if(props.status==='loadmore'){
		emit('load');
	}
}
</script>

<style lang="scss" scoped>
</style>